<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>excel-sort-2</title>
  <style>
  table{
    border-collapse:collapse;
  }
  table,th,td{
    border: 1px solid black;
  }
  </style>
</head>
<body>
  <div id="app"></div>

  <script type="text/javascript" src="../js/react.js"></script>
  <script type="text/javascript" src="../js/react-dom.js"></script>
  <script type="text/javascript">
    var header = ["Book","Author","Language"];
    var exceldata = [["Think in java","janmes","JAVA"],["C++ Permier","zhang san","C++"],["python编程思想","wang wu","python"]];

    var excel = React.createClass({
      displayName: 'excel',
      propTypes: {
        header: React.PropTypes.array,
      },
      getInitialState: function() {
        return {
          header: this.props.header,
          data: this.props.initdata,
          sortby: null,
          descending: false,//降序默认是false，也就是默认升序排序
        };
      },
      _sort:function(ev) {
        var column = ev.target.cellIndex;
        // this.state.sortby = column;  //错误的赋值方式，如果要设置state里的sortby，需要通过setState()方法设置

        // 只有当排序字段是同一字段，且，当前排序方式不是降序的时候，才进行降序排序
        var isDesc = this.state.sortby === column && !this.state.descending

        // slice()是数组的深度拷贝
        var sortdata = this.state.data.slice();
        // 数组的sort()方法，默认是按照ASIIC的先后循序排序，如果要按其他的方式排序，需要传入一个函数作为参数，函数传输两个参数，返回两个参数比较的大小
        sortdata.sort(function(a, b) {
          // return a[column] > b[column] ? 1: -1;
          return isDesc
           ? (a[column] < b[column] ? 1 : -1)//降序排列
           : (a[column] < b[column] ? -1 : 1)//升序排列
        });

        this.setState({
          data: sortdata,
          sortby: column,//这样对state的赋值方式才正确
          descending: isDesc,
        });
      },
      render: function(){
        return (
          React.DOM.table(null,
            // thead
            React.DOM.thead({onClick: this._sort},
              React.DOM.tr(null,
                this.state.header.map(function(title, idx){
                  var sortby = this.state.sortby;
                  console.log(sortby, this.state.descending);
                  if( sortby === idx) {
                    title = title + (this.state.descending ? ' \u2193': ' \u2191');
                  }
                  return React.DOM.th({key: idx}, title);
                }, this)//注意，这里要传入this，否则回调函数里，是不知道外边react对象的，也就是回调函数里的this.state是没有对象引用的
              )
            ),
            // tbody
            React.DOM.tbody(null,
              this.state.data.map(function(row, rowid){
                return React.DOM.tr({key: rowid},
                  row.map(function(cell, idx) {
                    return React.DOM.td({key: idx}, cell);
                  })
                );
              })
            )
          )
        );
      }

    });

    ReactDOM.render(
      // 用自定义组建创建
      // 直接用React.createElement(标签, 属性, 子元素),
      // React.createElement("span", null, "this is 直接创建 element"),
      React.createElement(excel, {
        header: header,
        initdata: exceldata,
      }),
      document.getElementById("app")
    )
  </script>
</body>
</html>
